<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            background: url(images/111.jpg);
            background-size: 1536px 826px;
            widows: 100%;
            height: 100%;
            position: relative;
        }

        li {
            width: 10px;
            height: 150px;
            position: fixed;

            background: url(images/shuidi.png) no-repeat;
            background-size: 10px 100px;
        }

        img {
            width: 20px;
            height: 100px;
        }
    </style>
</head>

<body>
    <ul>

    </ul>
</body>
<html>
<script>
    setInterval(function () { //每隔多久下一次雨
        var li = document.createElement('li') //新创建一个li
        var ul = document.querySelector('ul') //获取ul

        ul.appendChild(li) //将li插入到里

        li.style.top = 0 + 'px' //li top的初始位置
        li.style.left = Math.random() * 1920 + 'px' //li left的随机的初始位置
        li.style.opacity = (Math.random()) * 0.9 + 0.1 //雨滴的透明度0.1~1

        var timer = setInterval(function () { //下一滴雨的降落时间

            var height = parseInt(li.style.top) //将雨滴下降的高度赋值给height
            var width=parseInt(li.style.left)//将雨滴水平移动赋值黑width

            li.style.left= width-8+'px'//雨滴每次切斜速度
            li.style.top = height + 5 * 5 + 'px' //雨滴每次下降的速度

            if (height > 600) { //当雨滴下降的高度到达600时

                clearInterval(timer) //关闭定时器
               ul.removeChild(li) //删除创建的li


            }
        }, 30)
    }, 30)

    
    console.log(screen.availWidth)
    console.log(screen.availHeight)
</script>